<!-- 登陆页面 -->
<template>
  <div id="login">
    <div class="login-body">
      <div class="container">
        <div class="container-header">
          <span class="login-type active1">找回密码
          </span>
          <span class="hr" />
        </div>
        <div class="container-body">
          <div>
            <el-input v-model="userStr.userName"
                      class="input"
                      placeholder="请输入用户名"
                      clearable />
            <el-input v-model="userStr.userPwd"
                      class="input"
                      placeholder="请输入新密码"
                      show-password />
            <el-input v-model="userStr.userPhone"
                      class="input"
                      type="tel"
                      placeholder="请输入手机号码" />
            <el-input v-model="smsCode"
                      class="input phone-code"
                      placeholder="请输入手机验证码" 
                      size="small" />
            <el-button size="small"
                       @click="getCode">
              {{ computedTime ? `已发送(${computedTime}s) ` : "发送验证码" }}
            </el-button>
          </div>
          <div class="remember-register">
            <span @click="$router.push({path:'/register'})">注册</span>
          </div>
          <div style="clear:both;" />
          <div class="gologin">
            <el-button round
                       @click="retrievePwd">
              找回密码
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { sendMessage } from '@/api/phone';
  import { changePwd } from '@/api/useroperation';

  export default {
    name: 'forgetPwd',
    data() {
      return {
        userStr: {
          userName: '',
          userPwd: '',
          userPhone: '',
        },
        smsCode: '',
        computedTime: null, // 倒计时
        intervalId: null, // 验证码定时器
      };
    },
    methods: {
      getCode() {
        const { userStr } = this;
        if (!/^\d{11}$/.test(userStr.userPhone)) {
          this.$message.error('手机号码格式不正确!');
          return;
        }
        // 如果当前没有计时
        if (!this.computedTime) {
          // 启动计时
          this.computedTime = 60;
          this.intervalId = setInterval(() => {
            this.computedTime--;
            if (this.computedTime <= 0) {
              clearInterval(this.intervalId);
            }
          }, 1000);
          // 发ajax请求, 向手机号发验证码
          const { userPhone } = userStr;
          sendMessage({ userPhone });
          this.$message.success('验证码发送成功，请注意查看手机');
        }
      },
      retrievePwd() {
        const { userName, userPwd, userPhone } = this.userStr;
        if (!userName || !userPwd || !userPhone || !this.smsCode) {
          this.$message.error('用户名、密码、手机或验证码不能为空');
          return;
        }
        const params = {
          userStr: this.userStr,
          smsCode: this.smsCode,
        };
        changePwd(params).then(data => {
          if (data.success) {
            this.$message.success('找回密码成功，请前往登录页面进行登录。');
          } else {
            this.$message.error(data.errMsg);
          }
        });
      },
    },
  };
</script>
<style lang='scss' scoped>
#login {
  height: 490px;
  background: url("../assets/images/forget1.jpg") no-repeat top center;
  .login-body {
    width: 12rem;
    margin: 0 auto;
    position: relative;
    .container {
      position: absolute;
      width: 3.6rem;
      top: 0.6rem;
      right: 1rem;
      background: #fff;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
      .container-header {
        position: relative;
        width: 2.7rem;
        font-size: 0.2rem;
        height: 0.7rem;
        line-height: 0.7rem;
        letter-spacing: 0.02rem;
        margin: 0.2rem auto;
        border-bottom: 2px solid #eee;
        .login-type {
          margin: 0 0.8rem;
          cursor: pointer;
          color: #ff651b;
        }
        .hr {
          position: absolute;
          display: block;
          margin: 0;
          width: 2.7rem;
          border: 2px solid #ff651b;
          left: 0;
          bottom: -3px;
        }
      }
      .container-body {
        width: 2.7rem;
        margin: 0 auto;
        .input {
          margin-bottom: 0.15rem;
        }
        .phone-code {
          width: 1.35rem;
          margin-right: 0.15rem;
        }
        .remember-register {
          float: right;
          span {
            color: #666;
            margin-right: 0.05rem;
          }
        }
        .gologin {
          margin-top: 0.1rem;
          button {
            width: 2.7rem;
            height: 0.45rem;
            margin-bottom: 0.2rem;
            font-size: 0.2rem;
            font-weight: bold;
            color: #fff;
            background: #ff651b;
          }
        }
      }
    }
  }
}
</style>
